<template>
	<div id='tmpl'>
		<!-- 评论组件 -->
		<!-- 1.0 实现提交评论数据到服务器的静态结构 -->
		<!-- {{id}} -->
		<div id='postcomment'>
			<h3>提交评论</h3>
			<p class='p'></p>
			<textarea placeholder='请输入你要评论的内容...' v-model='postcontent'></textarea>
			<mt-button type="primary" size='large' @click='postcomment'>发表</mt-button>
		</div>
		
		<!-- 2.0 获取评论数据的列表 -->
		<div id='list'>
			<h3>评论列表</h3>
			<p class='p'></p>
			<div v-for='(item,index) in list'>
				<div class="title">
					<span>第{{index +1 }}楼</span>&nbsp;
					<span>用户：{{item.user_name}}</span>&nbsp;
					<span>评论时间:{{item.add_time | datefmt('YYYY-MM-DD')}}</span>
				</div>
				<ul class="mui-table-view">
					 <li class="mui-table-view-cell">{{item.content}}</li>
				</ul>
			</div>
		</div>

		<!-- 3.0 加载更多数据 -->
		<mt-button type="danger" size="large" plain>更多评论</mt-button>
	</div>
</template>
<script>
	import {Toast} from 'mint-ui';
	export default{
		data(){
			return{
				postcontent:"", //用来自动获取用户填写的评论内容
				list:[],  //评论数据的数组
				pname:'匿名用户',
				pageindex:'1'
			}
		},
		props:['id'], //作用是用来接收父组件传入过来的id值
		created(){
			this.list=[
				{
					'user_name':'匿名用户1',
					'add_time':'2017-04-10T08:28:08.000Z',
					'content':'很好！'
				},
				{
					'user_name':'匿名用户2',
					'add_time':'2017-03-10T08:28:08.000Z',
					'content':'很好！好强大！'
				},
				{
					'user_name':'匿名用户3',
					'add_time':'2017-02-10T08:28:08.000Z',
					'content':'很好！好强大！卢本伟牛逼！'
				}
			]
			// this,getcommentlist(this.pageindex);
		},
		methods:{
			// 3.0 实现加载更多的方法;
			// getmore:(){
			// 	1.0 实现this.pageindex值得增加1
			// 	this.pageindex++;

			// 	2.0 获取当前this.pageindex值对应的分页数据
			// 	this.getcommentlist(this.pageindex);
			// },

			//动态获取
			// 2.0 获取当前的评论数据 pageindex:代表的是当前获取的是那一页的数据，默认值是1;
			// getcommentlist(pageindex)
				// 	pageindex=pageindex || 1; 

				// 2.0 确认评论数据的url
				// var url = common.apidomain+'/api/getcomments/'+this.id'?pageindex='+pageindex;

				// 3.0 发起ajax请求获取数据即可
				// this.$http.get(url).then(function(res){
				// 	if(res.body.status ！= 0){
				// 		Toast.(res.body.message)
				// 	}
				// 	this.list=this.list.concat(res.body.message);
				// })
			// }

			// 1.0 评论数据的提交
			postcomment(){
				// 0.0 判断用户是否填写评论内容
				if(this.postcontent.trim().length<=0){
					Toast('评论不能为空');
					return;
				}

				// 1.0 确定提交的地址
				// var url=common.apidomain+'/api/postcomment/'+this.id;

				// 2.0 利用ajax的post请求将数据提交到指定的地址
				// 2.1 获取到用户在文本框中填写的评论内容，通过conten：内容格式提交到请求报文中
				// this.$http.post(url,{content:this.postcontent},{emulateJSON:true}).then(function(res){
				// 	Toast(res.body.message);

				// 3.0 将最新的评论数据追加到评论列表的最顶部
				// this.list=[{
				// 	'user_name':'匿名用户',
				// 	'add_time':new Date(),
				// 	'content':this.postcontent
				// }].concat(this.list);
				// // 3.1 清空表格数据
				// this.postcontent='';		

				// });

				// 3.0 静态添加content
				var p=[{'user_name':this.pname,'add_time':new Date(),'content':this.postcontent}]
				this.list=p.concat(this.list);
				this.postcontent='';	
			}
		}
	}
</script>
<style scoped>
	#postcomment{
		padding:5px;
	}
	.p{
		height:1px;
		width: 100%;
		border-bottom:1px solid rgba(0,0,0,0.05);
	}
	#list{
		padding: 5px;
	}
	h3{
		font-family:'黑体'
	}
	.title{
		    padding:5px;
		    background:rgba(0,0,0,0.1); 
   			color: #6d6d72;
   		    font-size: 15px;
	}
	.title span{
		font-size: 14px;
	}
	.mui-table-view:before{
		background:rgba(0,0,0,0); 
	}
</style>